<!-- 子组件（孙子组件）示例：通过 provide/inject 接收爷爷组件传递的数据和方法 -->
<script setup>
// 从 Vue 中导入 inject 函数
// inject 用于接收祖先组件（如爷爷组件）通过 provide 提供的数据或方法
import { inject } from "vue";

// 接收爷爷组件提供的名为 "money" 的数据
// inject 的第一个参数是注入的 key，需与爷爷组件 provide 时的 key 一致
let money = inject("money");

// 接收爷爷组件提供的名为 "updateMoney" 的方法
// 用于在子组件中修改爷爷组件的数据（通过调用注入的方法实现跨层级通信）
let updateMoney = inject("updateMoney");
</script>

<template>
    <!-- 子组件的基本结构 -->
    <div>子组件</div>
    <hr> <!-- 水平线用于分隔内容，增强视觉层次 -->

    <!-- 展示从爷爷组件接收到的资金数据 -->
    从爷爷组件接收到的资金：{{ money }}

    <!-- 按钮绑定点击事件，调用从爷爷组件注入的 updateMoney 方法 -->
    <!-- 点击时传递参数 500，触发爷爷组件中的方法以更新资金数据 -->
    <button @click="updateMoney(500)">单击按钮增加资金</button>
</template>

<style scoped>
/* scoped 属性确保样式仅作用于当前子组件 */
/* 可添加样式优化子组件显示效果 */
div {
    margin: 10px 0;
}

button {
    margin-top: 10px;
    padding: 4px 8px;
    cursor: pointer;
}
</style>